.icon-before-ml
  &:before
    margin-right: 10px
.icon-after-toggle
  &:after
    content: $icon-toggle-right
  &.active
    &:after
      content: '\e617'
.icon-question
  &:after
    content: $icon-question
.icon-close
  &:after
    content: $icon-close
.icon-wx
  &:after
    content: $icon-wx
    color: $color-aux-success 
  &.larger
    font-size: 80rpx
    line-height: @font-size


.icon-toggle-left
  &:before
    content: $icon-toggle-left
.icon-toggle-up-c
  &:after
    content: $icon-toggle-up-circle
.icon-toggle-down-c
  &:after
    content: $icon-toggle-down-circle
  &.active
    @extends .icon-toggle-up-c




[class*='a-icon']
  .icon-toggle-down-c
    &:after
      content: $icon-toggle-up-circle

.icon-goup
  &:after
    content: '\e636'
.icon-collect
  &:before
    content: $icon-collect
.icon-like
  &:before
    content: $icon-like
.icon-share
  &:before
    content: $icon-share
.icon-search
  &:before
    content: $icon-search
.icon-load
  &:before
    content: $icon-load
.icon-before-like
  &:before
    content: '\e7f6'


.animate-load
  animation: load 1.3s infinite linear;
  transform: translateZ(0);
  font-size: 8rpx
  border-radius: 50%
  width: 10rpx
  height: @width

.animate-load-row, .animate-load-row:before, .animate-load-row:after
  font-size: 6rpx
  border-radius: 50%
  width: 14rpx
  height: @width
  animation-fill-mode: both;
  animation: load2 1.8s infinite ease-in-out;
  color: $color-primary 
.animate-load-row
  position: relative
  &:before, &:after
    content: '';
    position: absolute;
    top: 0;
  &:before
    left: -3.5em;
    animation-delay: -0.32s;
  &:after
    left: 3.5em;